<template>
		<div class="signIn font">
			<div class="day_count">
				<div class="back_ flex alignCenter">
					<div style="font-size: 18px;">本月累计签到</div>
				</div>
				<div class="day_main flex justy_center  alignBaseline">
					<div class="flex">
						<div class="day_" v-for="item in signDays">{{item}}</div>
					</div>
					<div class="dat_text" >天</div>
				</div>
				<div class="calder_sel">
					<div class="calendar-box">
							<div class="miss_box">
								<div class="month">
									<div @click="lastMonth">
										上个月

									</div>
									<div class="date_text">{{year}}年{{month}}月</div>
									<div @click="nextMonth">
										下个月

									</div>
								</div>
								<div class="week">
									<div :style="'color:'+(weeks==weeked?bgweek:'')+';'" v-for="weeks in weekArr">{{weeks}}</div>
								</div>
								<div class="day">
									<div  :class="[{'checkday':days.date==''},{'choose':days.flag },{'today':days.date==localDate}]"
										 v-for="(days,index) in dayArr" :key="index"
										@click="signToday(days,index)">
										{{days.day}}
										<!-- <div :class="[{'repair': days.date!='' && !days.flag && days.date!=localDate && currentMonth==month && days.day<day},{'sign':days.date==localDate}]"></div> -->
										<div :class="[{'sign':days.date==localDate}]"></div>
									</div>
								</div>
							</div>
							<div class="but">
								<button v-if="!isSign" :disabled='todayStr == changeDateStr? false : true'  :style="'background:'+(todayStr == changeDateStr ? signBtnBg : '#666')+';'" @click="daySign(dayArr[aheadDay + day - 1])">立即签到</button>
								<button v-else :disabled="true" style="background-color:#666;" >今日已签</button>
							</div>
						</div>
				</div>
			</div>
		</div>
</template>
<script>
	import {Toast} from "vant";
	import {getSignList,Sign} from "@api/User";
	export default {
		name:'signIn',
		props: {
			// 语言
			lang: {
				type: String,
				default: 'zh'
			},
			//日历
			type: {
				type: String,
				default: 'calendar'
			},
			//周颜色
			bgweek: {
				type: String,
				default: '#ef5bc7'
			},
			//签到按钮
			signBtnBg: {
				type: String,
				default: '#ef5bc7'
			},
		},
		data() {
			return {
				weeked: '', // 今天周几
				dayArr: [], // 当前月每日
				localDate: '', // 今天日期
				day: new Date().getDate(), // 当前日
				year: new Date().getFullYear(), // 当前年
				month: new Date().getMonth() + 1, // 当前月
				currentMonth: new Date().getMonth() + 1, // 当前月
				weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周
				aheadDay: 0,	// 前方空白天数数量
				todayStr:'',
				changeDateStr:'',
				isSign:false,//判断今天是否已经签到
				signDays:'000',
				currentTimer:(new Date().getTime())/1000,//当前时间戳
				signdata:[],
			}
		},
		mounted() {
			let that = this;
			// 初始日期
			that.initDate();
			// 今天日期
			that.localDate = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(that.day);
			that.todayStr = that.year + '-' + that.formatNum(that.month);
			// 中英切换
			if (that.lang != 'zh') that.weekArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
			// 今天周几
			that.weeked = that.weekArr[new Date().getDay()];
			// 签到功能
			if (that.type != 'calendar') {
				for (let i in that.dayArr) {
					that.$set(that.dayArr[i], 'flag', false);
				}
			}
		},
		methods: {
			//将日期格式转化为时间戳
			formatTimer(date){
				return (new Date(date).getTime())/1000
			},
			//设置累计签到天数
			getSignDay(res){
				let days = String(res)
				// this.signDays = res
				let strArra = []
				for(let p=0;p<3;p++){
					if(days[p] == undefined){
						strArra.unshift('0')
					}else{
						strArra.push(days[p])
					}
				}
				this.signDays = strArra.join('')
			},
			//获取签到记录
			getSignLog(){
				getSignList().then(v => {
				   var  res = v;
				   if(res.data.list.length>0){
						let data = res.data.list;
						let data_s = data.map(item=>{
							return item.date
						})
						let data_n = [...new Set(data_s)];
						// this.$emit('signLog',data_n.length)
						this.getSignDay(data_n.length)
						//判断今天是否已经签到
						data.forEach((item,index)=>{
							if(item.date == this.localDate){
								this.isSign = true
							}
						})
						//标记签到的日期
						this.dayArr.forEach((item,index)=>{
							data.forEach((items,index)=>{
								if( item.date!=='' && item.date == items.date){
									item.flag = true
								}
							})
						})
						this.$forceUpdate()
				   }
				})
			},
			// 选择年月
			changeDate(e) {
				let that = this;
				that.year = parseInt(e.detail.value.split('-')[0]);
				that.month = parseInt(e.detail.value.split('-')[1]);
				that.initDate();
			},
			formatNumber(num) {
				return num < 10 ? ('0' + num) : num;
			},
			formatTime(number, format) {
				var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
				var returnArr = [];

				var date = new Date(number * 1000);
				returnArr.push(date.getFullYear());
				returnArr.push(this.formatNumber(date.getMonth() + 1));
				returnArr.push(this.formatNumber(date.getDate()));

				returnArr.push(this.formatNumber(date.getHours()));
				returnArr.push(this.formatNumber(date.getMinutes()));
				returnArr.push(this.formatNumber(date.getSeconds()));

				for (var i in returnArr) {
					format = format.replace(formateArr[i], returnArr[i]);
				}

				return format;
			},
			// 今日签到
			daySign(obj) {
				// 今天日期加上前方空白日期数量
				let index = this.aheadDay + this.day - 1
				let nowTime = this.formatTime((new Date().getTime())/1000,'Y-M-D h:m:s');
				Sign().then(v => {
					if(v.code==200){
						Toast.success({
						  message: v.msg,
						  duration: 2000
						})
						this.$set(this.dayArr[index], 'flag', true);
						this.isSign = true;
						this.getSignLog()//刷新签到签到记录
						// this.$emit('signSuccess', {
						// 	msg:'签到成功',
						// 	data:1
						// });
					}else{
						Toast.success({
						  message:v.msg,
						  duration: 2000
						})
					}
				})
			},
			// 点击补签
			signToday(obj, index) {
				// Toast.success({
				//   message: "已过期",
				//   duration: 2000
				// })
				return;
				let that = this;
				// 限制本月可进行签到
				if ((new Date().getMonth() + 1) != parseInt(obj.date.split('-')[1])) return;
				// 禁用非本月点击签到且限制签到日期小于本日
				if (obj.date != '' && obj.day < that.day) {
					// 开启已签到提醒
					if (that.dayArr[index].flag) {
						Toast.success({
						  message: "已签到",
						  duration: 2000
						})
						// uni.showToast({
						// 	title: '已签到',
						// 	icon: 'none'
						// });
					} else {
						// uni.showToast({
						// 	title: that.day > obj.day ? '补签成功' : '',
						// 	icon: 'success'
						// });

						Toast.success({
						  message: that.day > obj.day ? '补签成功' : '',
						  duration: 2000
						})

						that.$set(that.dayArr[index], 'flag', true);
						that.$emit('signSuccess', {
							msg:'补签成功',
							data:2
						});
					}
				}
			},
			// 初始化日期
			initDate() {
				let that = this;
				that.dayArr = [];
				// 当前月总天数
				let totalDay = new Date(that.year, that.month, 0).getDate();
				// 遍历总天数将日期逐个添加至数组
				for (let i = 1; i <= totalDay; i++) {
					// 得到需补充天数
					let value = (new Date(that.year, that.month - 1, i)).getDay();
					// 补充前面空白日期
					if (i == 1 && value != 0) {
						that.addBefore(value);
						that.aheadDay = value;
					}
					// 添加本月日期
					let obj = {};
					obj.date = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(i);
					obj.day = i;
					that.dayArr.push(obj);
					// 补充后面空白日期
					if (i == totalDay && value != 6) that.addAfter(value);
				}
				that.changeDateStr=that.year+'-'+that.formatNum(that.month)
				that.getSignLog();//获取当月签到记录
			},
			// 补充前面空白日期
			addBefore(value) {
				let that = this;
				let totalDay = new Date(that.year, that.month - 1, 0).getDate();
				for (let i = 0; i < value; i++) {
					let obj = {};
					obj.date = '';
					obj.day = totalDay - (value - i) + 1;
					that.dayArr.push(obj);
				}
			},
			// 补充后空白日期
			addAfter(value) {
				let that = this;
				for (let i = 0; i < (6 - value); i++) {
					let obj = {};
					obj.date = '';
					obj.day = i + 1;
					that.dayArr.push(obj);
				}
			},
			// 格式化日期位数
			formatNum(num) {
				return num < 10 ? ('0' + num) : num;
			},
			// 上一个月
			lastMonth() {
				let that = this;
				if (that.month == 1) {
					that.year -= 1;
					that.month = 12;
				} else {
					that.month -= 1;
				}
				that.initDate();
			},
			// 下一个月
			nextMonth() {
				let that = this;
				if (that.month == 12) {
					that.year += 1;
					that.month = 1;
				} else {
					that.month += 1;
				}
				that.initDate();
			}
		}
	}
</script>
<style scoped>
	.flex{
		display: flex;
	}
	.day_count{
		width: 100%;
		height: 207px;
		/* background-image: url('../../public/static/images/bgf.png'); */
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;


	}
	.back_{
		height: 44px;
		line-height: 44px;
		justify-content: center;
		color: #fff;
		.back_icon{
			position: absolute;
			left: 0;
			top: 0;
			height: 44px;
			line-height: 44px;
			padding: 0 10px;
		}
	}
	.day_main{
		height:60px;
		width: 175px;
		position: relative;
		margin:30px  auto 20px auto;

	}
	.day_{
		width: 40px;
		height:60px;
		line-height: 60px;
		text-align: center;
		margin-right: 10px;
		background-color: #fff;
		color: red;
		font-size: 50px;
		border-radius: 5px;
	}
	.dat_text{
		position: absolute;
		right: 0;
		bottom: 0;
		color: #fff;
		font-size: 18px;
	}
	.calendar-box {
		width: 100%;
		flex-direction: column;
		justify-content: center;

	}
	.date_text{
		color: #fff;
		font-size: 18px;
	}
	.miss_box {
		/* // margin-top: -100px; */
		width: 100%;
		background-image: url('../../public/static/images/calder.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 405px;
		/* height: 704px; */
		margin:0 auto;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.calendar-box,
	.month,
	.week,
	.day {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.month,
	.week,
	.day {
		width: 100%;
	}

	.month {
		margin: 25px 0;
		color: #fff;
		position: relative;
	}

	.picker {
		width: 80px;
		height: 20px;
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.day {
		flex-wrap: wrap;
	}

	.week>div,
	.day>div {
		width:11%;
		height: 30px;
		margin: 5px;
		text-align: center;
		position: relative;
		line-height: 40px;
	}

	.checkday {
		color: #999;
	}

	.day .choose {
		width:40px;
		height: 40px;
		color: #FFFFFF;
		border-radius: 50%;
		background-color: #ef5bc7;
		color: #fff;
	}

	.circle {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.sign {
		background-color: #f5a34f;
		color: #fff;
		width: 16px;
		height: 16px;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -4px;
		right: -4px;
		&::after{
		  content:'今';
		  display: block;
		}
	}

	.sign::after{
	  content:'今';
	  display: block;
	}

	.repair {
		background-color: #f00;
		color: #fff;
		width: 16px;
		height: 16px;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -4px;
		right: -4px;
		&::after{
			  content:'补';
			  display: block;
			}
	}

	.but {
		display: flex;
		flex: 1;
		margin-top:20px;
		justify-content: center;
	}
	.but button {
		width: 325px;
		height: 40px;
		line-height: 40px;
		border-radius: 7.5px;
		border: 0.5px solid transparent;
		outline: none;
		color: #FFFFFF;
		font-size: 16px;
		background-color: #ef5bc7;
	}
	button:after {
		border: none;
	}

	.top {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 15px;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-bottom: 8px;
		align-items: center;
	}
	.top h4 {
		font-weight: 600;
		font-size: 18px;
		line-height: 25px;
	}
	.top h4 span {
		color: #4187F9;
		margin: 0 6px;
		font-size: 16px
	}
	.top p {
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: 20px;
		color: #4187F9;
	}

	.rig span {
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
		line-height: 24px;
		color: #4187F9;
		border: 0.5px solid #4187F9;
		padding: 5px 10px;
		border-radius: 16px;
	}
</style>
